<!-- 站点管理 -->
<template>
  <page-loading :show="pageLoading">
    <view class="site-mgt">
      <!-- 洗车点/洗车机 -->
      <view class="count-wrap flex">
        <view class="count-item">
          <text>{{ selfServiceCarWashStationNumber }}</text>
          <view>洗车点</view>
        </view>
        <view class="count-item">
          <text>{{ selfWashMachineNumber }}</text>
          <view>洗车机(台)</view>
        </view>
      </view>
      <view class="car-info-wrap">
        <scroll-view scroll-y="true" class="scroll-y">
          <carInfo v-for="item in list" :key="item.id" :carData="item" @openSet="openSet" @submitEditName="submitEditName"></carInfo>
        </scroll-view>
      </view>
      <!-- 时间选择器 -->
      <u-picker
        mode="time"
        v-model="timePicker.show"
        :params="timePicker.params"
        @confirm="confirmTime"
        :default-time="timePicker.type === 1 ? timePicker.startTime.hour + ':' + timePicker.startTime.minute : timePicker.endTime.hour + ':' + timePicker.endTime.minute"
      ></u-picker>
      <!-- 提示弹窗 -->
      <u-modal
        :mask-close-able="true"
        v-model="modal.show"
        :content="modal.content"
        :show-confirm-button="modal.showConfirmButton"
        :show-cancel-button="modal.showCancelButton"
        :title="modal.title"
        @confirm="confirm"
      ></u-modal>
      <u-toast ref="uToast" />
      <!-- 设置弹窗 -->
      <u-modal
        v-model="setModal.show"
        @confirm="confirmSet"
        :show-cancel-button="true"
        :title="setModal.type === 1 ? '设置营业时间' : '是否停车收费'"
        :title-style="{ fontWeight: 'bold' }"
        z-index="1000"
      >
        <view class="set-moadl">
          <template v-if="setModal.type === 1">
            <view class="item">
              <text :class="{ active: setModal.selectType === 1 }">24h营业</text>
              <view class="icon-wrap" @click="setModal.selectType = 1">
                <i-icon v-if="setModal.selectType === 1" icon="icongouxuan" type="multiple" size="40rpx"></i-icon>
                <i-icon v-else icon="icontuoyuan" type="single" size="40rpx"></i-icon>
              </view>
            </view>
            <view class="item item-time-wrap">
              <view class="item-time" @click="openTimePicker(1)">
                <view :class="[{ active: setModal.selectType === 2 }, 'time']">{{ timePicker.startTime.hour }}:{{ timePicker.startTime.minute }}</view>
                <text>开始时间</text>
              </view>
              <view class="item-time" @click="openTimePicker(2)">
                <view :class="[{ active: setModal.selectType === 2 }, 'time']">{{ timePicker.endTime.hour }}:{{ timePicker.endTime.minute }}</view>
                <text>结束时间</text>
              </view>
              <view class="icon-wrap" @click="setModal.selectType = 2">
                <i-icon v-if="setModal.selectType === 2" icon="icongouxuan" type="multiple" size="40rpx"></i-icon>
                <i-icon v-else icon="icontuoyuan" type="single" size="40rpx"></i-icon>
              </view>
            </view>
          </template>
          <!-- 是否停车收费 -->
          <template v-if="setModal.type === 2">
            <view class="item">
              <text :class="{ active: setModal.selectType === 1 }">无停车收费</text>
              <view class="icon-wrap" @click="setModal.selectType = 1">
                <i-icon v-if="setModal.selectType === 1" icon="icongouxuan" type="multiple" size="40rpx"></i-icon>
                <i-icon v-else icon="icontuoyuan" type="single" size="40rpx"></i-icon>
              </view>
            </view>
            <view class="item">
              <text :class="{ active: setModal.selectType === 2 }">小区收取外来车辆停车费</text>
              <view class="icon-wrap" @click="setModal.selectType = 2">
                <i-icon v-if="setModal.selectType === 2" icon="icongouxuan" type="multiple" size="40rpx"></i-icon>
                <i-icon v-else icon="icontuoyuan" type="single" size="40rpx"></i-icon>
              </view>
            </view>
          </template>
        </view>
      </u-modal>
    </view>
  </page-loading>
</template>

<script>
import carInfo from './carInfo'
export default {
  data() {
    return {
      pageLoading:false,
      list: [],
      // 洗车点
      selfServiceCarWashStationNumber: 0,
      // 洗车机台数
      selfWashMachineNumber: 0,
      // 公共弹窗
      modal: {
        show: false,
        content: '',
        showConfirmButton: false,
        showCancelButton: false
      },
      // 设置弹窗
      setModal: {
        show: false,
        type: 1,
        selectType: 1
      },
      // 时间选择器
      timePicker: {
        type: 1,
        show: false,
        params: {
          year: false,
          month: false,
          day: false,
          hour: true,
          minute: true,
          second: false
        },
        startTime: {
          hour: '00',
          minute: '00'
        },
        endTime: {
          hour: '00',
          minute: '00'
        }
      }
    }
  },
  onLoad() {
    // 获取数据
    this.getData()
  },
  components: {
    carInfo
  },
  methods: {
    // 重置定位
    resetLocation(obj) {
      this.list.forEach(item => {
        if (item.id === obj.id) {
          item.address = obj.address
          item.lat = obj.lat
          item.lon = obj.lon
          item.base_Region_Id = obj.base_Region_Id
          item.base_Region_City_Id = obj.base_Region_City_Id
          item.base_Region_Province_Id = obj.base_Region_Province_Id
          this.editAll(obj.id)
          return
        }
      })
    },
    // 修改数据调用方法
    async editAll(id) {
      let activeList = null
      this.list.forEach(item => {
        if (item.id === id) {
          activeList = item
          return
        }
      })
      uni.showLoading({
        title: '修改中'
      })
      console.log('activeList', activeList)
      try {
        const res = await this.$api.washCar.setSiteMgt(activeList)
        uni.hideLoading()
        if (res && res.code === 200) {
          this.getData()
          this.$refs.uToast.show({
            title: '修改成功'
          })
        }
      } catch (e) {
        this.getData()
      }
    },
    // 修改站点名称
    submitEditName(obj) {
      this.list.forEach(item => {
        if (item.id === obj.id) {
          item.station_Name = obj.name
          return
        }
      })
      this.editAll(obj.id)
    },
    // 获取列表
    async getData() {
      // #ifdef  H5
      const res = await this.$api.washCar.siteMgt({
        pageIndex: 1,
        pageSize: 100,
        lat: 0,
        lon: 0
      })
      if (res && res.code === 200) {
        this.selfServiceCarWashStationNumber = res.data.selfServiceCarWashStationNumber
        this.selfWashMachineNumber = res.data.selfWashMachineNumber
        this.list = res.data.data.list
        this.pageLoading = true
      }
      // #endif
      // #ifndef  H5
      uni.getLocation({
        type: 'wgs84',
        success: async r => {
          const res = await this.$api.washCar.siteMgt({
            pageIndex: 1,
            pageSize: 100,
            lat: r.latitude,
            lon: r.longitude
          })
          if (res && res.code === 200) {
            this.selfServiceCarWashStationNumber = res.data.selfServiceCarWashStationNumber
            this.selfWashMachineNumber = res.data.selfWashMachineNumber
            this.list = res.data.data.list
            this.pageLoading = true
          }
        }
      })
      // #endif
    },
    // 打开Picker时间选择器
    openTimePicker(type) {
      this.timePicker.type = type
      this.timePicker.show = true
    },
    // 点击设置
    openSet(obj) {
      // 设置营业时间
      if (obj.type === 1) {
        if (obj.open_Start_Time === '00:00' && obj.open_End_Time === '00:00') {
          this.setModal.selectType = 1
        } else {
          this.setModal.selectType = 2
          this.timePicker.startTime = {
            hour: obj.open_Start_Time.split(':')[0],
            minute: obj.open_Start_Time.split(':')[1]
          }
          this.timePicker.endTime = {
            hour: obj.open_End_Time.split(':')[0],
            minute: obj.open_End_Time.split(':')[1]
          }
        }
        // 是否停车收费
      } else if (obj.type === 2) {
        if (obj.park === '无停车收费') {
          this.setModal.selectType = 1
        } else {
          this.setModal.selectType = 2
        }
      }
      this.setModal.type = obj.type
      this.setModal.id = obj.id
      this.setModal.show = true
    },
    // Picker时间选择器确认
    confirmTime(e) {
      let obj = {
        hour: e.hour,
        minute: e.minute
      }
      if (this.timePicker.type === 1) {
        this.timePicker.startTime = obj
      } else {
        this.timePicker.endTime = obj
      }
    },
    // 设置弹窗确认
    confirmSet() {
      // 设置营业时间
      if (this.setModal.type === 1) {
        let startTime = null
        let endTime = null
        let openTime = null
        // 全天
        if (this.setModal.selectType === 1) {
          startTime = '00:00'
          endTime = '00:00'
          openTime = '24h'
          // 自选
        } else {
          // 结束时间不能大于开始时间
          if(Number(this.timePicker.startTime.hour) > Number(this.timePicker.endTime.hour)){
            this.$refs.uToast.show({
              title: '结束时间不能小于开始时间'
            })
            return
          }else if(Number(this.timePicker.startTime.hour) === Number(this.timePicker.endTime.hour)){
            this.$refs.uToast.show({
              title: '结束时间不能等于开始时间'
            })
            return
          }
          startTime = `${this.timePicker.startTime.hour}:${this.timePicker.startTime.minute}`
          endTime = `${this.timePicker.endTime.hour}:${this.timePicker.endTime.minute}`
          openTime = startTime + '-' + endTime
        }
        this.list.forEach(item => {
          if (item.id === this.setModal.id) {
            item.open_Start_Time = startTime
            item.open_End_Time = endTime
            item.open_Time = openTime
            return
          }
        })
        // 是否停车收费
      } else {
        this.list.forEach(item => {
          if (item.id === this.setModal.id) {
            item.park = this.setModal.selectType === 1 ? '无停车收费' : '小区收取外来车辆停车费'
            return
          }
        })
      }
      this.editAll(this.setModal.id)
    },
    // 公共弹窗确认
    async confirm() {
      switch (this.modal.state) {
        case 1:
          uni.showLoading({
            title: '修复中'
          })
          const res = await this.$api.washCar.repairSiteMgt({
            wash_Machine_Id: this.modal.wash_Machine_Id,
            type: this.modal.type
          })
          uni.hideLoading()
          if (res && res.code === 200) {
            this.getData()
            this.$refs.uToast.show({
              title: '机器修复成功'
            })
          }
          break
        case 2:
          {
            const res = await this.$api.washCar.siteMgtOpen({
              open: this.modal.open,
              wash_Machine_Id: this.modal.wash_Machine_Id
            })
            if (res && res.code === 200) {
              this.modal.success()
              setTimeout(() => {
                this.modal = {
                  content: '操作成功，机器已停机！检修或加注清水、泡沫后记得启动机器哦！',
                  title: '提示',
                  show: true,
                  showConfirmButton: false,
                  showCancelButton: false
                }
              }, 500)
            }
          }
          break
      }
    },
    // 报修
    repair(obj) {
      this.modal = obj
    }
  }
}
</script>

<style lang="scss" scoped>
.site-mgt {
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding-bottom: 25rpx;
  .count-wrap {
    padding: 18rpx 50rpx;
    background-color: #ffffff;
    z-index: 100;
    .count-item {
      flex: 1;
      text-align: center;
      font-size: 24rpx;
      color: #666666;
      text {
        font-size: 44rpx;
        color: #333333;
      }
    }
  }
  .car-info-wrap {
    flex: 1;
    overflow: hidden;
    .scroll-y {
      height: 100%;
    }
  }
  .set-moadl {
    padding: 0 20rpx;
    padding-top: 30rpx;
    .item {
      padding: 28rpx 0;
      border-top: 2rpx solid #eeeeee;
      text-align: center;
      font-size: 28rpx;
      color: #999999;
      position: relative;
      &.item-time-wrap {
        display: flex;
        justify-content: center;
        .icon-wrap {
          margin-top: -20rpx;
        }
        .item-time {
          &:nth-child(2) {
            margin-left: 40rpx;
          }
          .time {
            font-size: 34rpx;
            padding: 20rpx 36rpx;
            border-radius: 20rpx;
            border: 2rpx solid #eeeeee;
            margin-bottom: 10rpx;
          }
        }
      }

      .icon-wrap {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 10rpx;
      }
      .active {
        color: #fbb000;
      }
    }
  }
}
</style>
